<template>
  <div class="container" :class="props.indicators ? '' : 'hide'">
    <!-- arrow="never" -->
    <el-carousel ref="cardShowRef" :autoplay="false">
      <el-carousel-item
        v-for="item in Math.ceil(swiperDate.length / sliceUnit)"
        :key="item"
      >
        <div class="swiper_switchover">
          <div
            class="swiper_Item"
            v-for="(item, index) in getPageData(item)"
            :key="index"
          >
            <slot name="content" :item="item"></slot>
            <el-image
              v-if="item.url"
              style="width: 100px; height: 100px"
              :zoom-rate="1.2"
              :max-scale="7"
              preview-teleported
              :min-scale="0.2"
              fit="cover"
              v-bind="$attrs"
              :preview-src-list="swiperDate.map(item => item.url)"
              :src="item.url"
              :initial-index="Number(item.id - 1)"
              alt=""
            />
          </div>
        </div>
      </el-carousel-item>
    </el-carousel>
  </div>
</template>

<script setup>
const props = defineProps({
  swiperDate: {
    type: Array,
    default: () => []
  },
  sliceUnit: {
    type: Number,
    default: 2
  },
  indicators: {
    type: Boolean,
    default: false
  }
})

const data = ref(props.swiperDate)
const cardShowRef = ref()

const getPageData = pageIndex => {
  const startIndex = (pageIndex - 1) * props.sliceUnit
  const endIndex = pageIndex * props.sliceUnit
  return data.value.slice(startIndex, endIndex)
}
</script>

<style lang="scss" scoped>
.container {
  height: inherit;
}
.swiper_switchover {
  display: flex;
  margin: 0 70px;
  justify-content: space-between;
  align-items: center;
  .swiper_Item:last-child {
    margin-right: 0;
  }
}

.hide {
  :deep(.el-carousel__indicators--horizontal) {
    display: none;
  }
}
.el-carousel {
  height: inherit;
  :deep(.el-carousel__arrow) {
    background: rgba(36, 196, 211, 0.1);
  }
  :deep(.el-carousel__arrow .el-icon) {
    color: #24c4d3;
    font-size: 16px;
    font-weight: bold;
  }
}
img {
  height: 100px;
}
</style>
